<template>
  <div class="login-container">
    <div class="login-wrapper">
      <div class="login-wrapper-left animate__animated animate__fadeInLeft">
        <img class="img" src="/img/logo.png" alt="" />
        <p class="title">{{ state.title }}</p>
        <p>©{{ state.year }} {{ state.version }}</p>
      </div>
      <div class="login-wrapper-right animate__animated animate__fadeInRight">
        <div class="login-main">
          <LoginForm></LoginForm>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import LoginForm from './components/LoginForm.vue';

const state = reactive({
  title: computed(() => import.meta.env.VITE_WEBSITE_TITLE),
  version: computed(() => import.meta.env.VITE_WEBSITE_VERSION),
  year: new Date().getFullYear(),
});
</script>
<style lang="scss" scoped>
.login-container {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: #fff;
  overflow: hidden;
  &::before {
    content: ' ';
    position: absolute;
    top: 0;
    left: 0;
    right: 48%;
    bottom: 0;
    background-image: url('/svg/login-bg.svg');
    background-position: 100%;
    background-repeat: no-repeat;
    background-size: auto 100%;
  }
  .login-wrapper {
    width: 100%;
    margin: 0 auto;
    & > div {
      position: relative;
      min-height: 500px;
      align-items: center;
      display: flex;
    }
    &-left {
      justify-content: center;
      flex-direction: column;
      color: #fff;
      float: left;
      width: 50%;
      position: relative;
      box-sizing: border-box;
      @media only screen and (max-width: 992px) {
        display: none !important;
      }
      .img {
        width: 200px;
      }
      .title {
        margin-top: 60px;
        text-align: center;
        color: #fff;
        font-weight: 300;
        letter-spacing: 2px;
        font-size: 28px;
        font-weight: bold;
      }
    }
    &-right {
      border-left: none;
      border-radius: 5px;
      color: #fff;
      .login-main {
        margin: 0 auto;
        padding: 30px 50px;
        width: 70%;
        box-shadow: -4px 5px 10px rgba(255, 255, 255, 0.4);
        & > h3 {
          margin-bottom: 20px;
        }
      }
    }
  }
}
</style>
